---
title: Quickstart - Mitosis
---

# Quickstart

### Create a new project

Start a new Mitosis project by running the following command in your terminal:

```bash
npm create @builder.io/mitosis@latest
```

When prompted, enter a project name and select your desired output. Currently, we support outputs for React, Svelte, and Qwik. After making your selection, navigate to the project folder and install the dependencies.

<video
  width="752"
  height="428"
  autoplay
  playsInline
  muted
  loop
  src="https://cdn.builder.io/o/assets%2FYJIGb4i01jvw0SRdL5Bt%2Fac60d98b072940cabb00bd2f2839a7b9%2Fcompressed?apiKey=YJIGb4i01jvw0SRdL5Bt&token=ac60d98b072940cabb00bd2f2839a7b9&alt=media&optimized=true"
/>

### Explore the project structure

Focus on the `library` folder within your project. In `library/src`, you will find:

- An `autocomplete` component
- A `todo-app` component

Each component is housed in its own folder and written in a `.lite.tsx` file, the standard file format for Mitosis components. Also, explore the `library/packages` folder, which contains starter code for the outputs you selected during setup.

### Run the project

1.  **Start the development server**
    From within the `library` folder, run the following command to start the development server:
    `npm run start`

            This command automatically generates component code in the corresponding output folder. You write code once, and it gets converted into React, Qwik, and Svelte code.

2.  **Add a new component**
    Create a `library/src/greet.lite.tsx` file with the following code:

```tsx
import { useStore } from '@builder.io/mitosis';

export default function Greet() {
  const state = useStore({
    name: '',
  });

  return (
    <div>
      <input
        value={state.name}
        onChange={(event) => (state.name = event.target.value)}
        placeholder="Your name"
      />
      <div>Hello, {state.name}!</div>
    </div>
  );
}
```

3.  **Configure project settings**
    In the root of your project, add a `mitosis.config.js` file to specify the target output. Possible targets include Alpine, Angular, customElement, HTML, Mitosis, Liquid, React, React Native, Solid, Svelte, Swift, Template, Webcomponent, Vue (version 3), Stencil, Qwik, Marko, Preact, Lit, and RSC.

By following these steps, you'll be well on your way to developing with Mitosis, taking advantage of its capability to write once and deploy to multiple frameworks.

See our [CLI documentation](/docs/cli) for more commands you can run for developing and building.

### Verify your components

After generating the component code with Mitosis, the next step is to ensure that your components work as expected. Here's how to verify them using Svelte as the target framework:

1. **Export the components**

   Export the `Greet` component from the `library/src/index.ts` file:

   ```tsx
   export { default as Greet } from './greet.lite';
   ```

2. **Build the library**

   From the `library/packages/svelte` folder, build the Svelte components by running the following command:

   ```bash
   npm run build:watch
   ```

3. **Test in a an application**

   We'll use Svelte for this example, but these same steps work for any other output frameworks.

   - Navigate to the `test-apps/svelte` folder:
     ```bash
     cd test-apps/svelte
     ```
   - Open the `src/routes/+page.svelte` file and import the component:

     ```tsx
     <script lang="ts">
       import { AutoComplete, Todos, Greet } from '@demo-one/library-svelte';
     </script>

     <h1>Welcome to SvelteKit</h1>
     <AutoComplete />
     <Todos />
     <Greet />
     <p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

     ```

4. **Start the dev server**

   Start the development server for your Svelte app with the following command:

   ```bash
   npm run dev
   ```

5. **Verify the component**

   Open [http://localhost:5173](http://localhost:5173/) in your browser. You should see the functioning Greet component along with the other components.

By following these steps, you'll be well on your way to developing with Mitosis, taking advantage of its capability to write once and deploy to multiple frameworks.

<video
  width="752"
  height="428"
  autoplay
  playsInline
  muted
  loop
  src="https://cdn.builder.io/o/assets%2FYJIGb4i01jvw0SRdL5Bt%2F65318cd035a940f88f7c19bfb0844e31%2Fcompressed?apiKey=YJIGb4i01jvw0SRdL5Bt&token=65318cd035a940f88f7c19bfb0844e31&alt=media&optimized=true"
/>

### Next steps

- Read more on writing [Mitosis components](/docs/components)
- Explore the [Figma integration](/docs/figma) for generating Mitosis components from Figma designs
